import React, { useEffect, useState, useCallback } from "react";
import { Button, Space, Table, Modal, message, Divider } from "antd";
import { rolesQuery,roleDel} from "../../api/oss/role";
import './index.less'
import EnhancedTable from "../table/EnhancedTable"
import AddNewRole from "./AddNewRole";
const confirm = Modal.confirm;
const RoleManagement = () => {
  const [columns,setColumns] = useState([
    {
        title: '角色名称',
        dataIndex: 'name',
        align: 'center',
        key: 'name',
        render: (text) => <a>{text}</a>,
      },
      {
        title: '简写',
        dataIndex: 'shortName',
        align: 'center',
        key: 'shortName',
      },
      {
        title: '描述',
        dataIndex: 'description',
        align: 'center',
        key: 'description',
      },
      {
        title: '创建时间',
        dataIndex: 'createTime',
        align: 'center',
        key: 'createTime',
      },
      {
        title: '当前用户',
        dataIndex: 'users',
        align: 'center',
        key: 'users',
        render: (users) =>(
            <Space size="middle">
            <p>{users}</p>
            <a href="javascript:void(0)" onClick={showUserModifyModal}>设置用户</a>
          </Space>
        )
      },
      {
        title: '展示数据类型',
        dataIndex: 'dataShowMode',
        key: 'dataShowMode',
      },
      {
        title: '操作',
        dataIndex: 'operate',
        key: 'operate',
        render: () =>(
            <Space size="middle">
            <a href="javascript:void(0)" onClick={showModal}>修改</a>
            <a href="javascript:void(0)" onClick={confirmDelete}>删除</a>
          </Space>
        )
      }
])
const [searchParams,setSearchParams] = useState(
  [
    {
        title: '角色名',
        name: 'roleName',
        type: 'input',
        placeholder: '请输入角色名称',
        maxLength: 30,
    },
    {
      title: '用户名',
      name: 'userName',
      type: 'input',
      placeholder: '请输入用户名称',
      maxLength: 30,
  }
]
)
const [modelData,setModelData] = useState(null);
const [keyNum,setKeyNum] = useState(0);
const [visible,setVisible] = useState(false);
const [roleVisible,setRoleVisible] = useState(false);
const [userVisible,setUserVisible] = useState(false);
const [load,setLoad] = useState(false);
const [tableData,setTableData] = useState({});
const fetchData = async(params) => {
    setLoad(true);
    let res = await rolesQuery(params);
    if(res.flag){
        setTableData(res.data)
        setLoad(false)
    }
}
const onTableSearch = (params) => {
  // if (params.applyTime) {
  //     params.applyTimeStart = params.applyTime[0].format('YYYY-MM-DD 00:00:00');
  //     params.applyTimeEnd = params.applyTime[1].format('YYYY-MM-DD 23:59:59');
  // }
  fetchData(params);
};

const showModal = (data) =>{
  if (data === null) {
      const keyNum = keyNum + 1;
     setKeyNum(keyNum);
  }
  setRoleVisible(true);
  setModelData(data);
}

const showUserModifyModal = (data) =>{
  setUserVisible(true);
  setModelData(data);
}

const hideModal = (e) =>{
setVisible(false);
setRoleVisible(false);
setUserVisible(false);
}

const onChildAction = () =>{
  let params = {}
  onTableSearch(params)
  hideModal();
}

const confirmDelete = (record) =>{
  confirm({
      title: '您是否确认要删除当前角色  ' + record.name + ' ?',
      content: '',
      onOk: () => {
          deleteRole(record);
      },
  });
}

const deleteRole = async (record) =>{
  let res = await roleDel(record.id);
  if(res.flag) {
    message.success('操作成功');
    onChildAction();
  }
}
  useEffect(()=>{
    hideModal() //模态框右上角取消
  },[])
// const handleExport = (data) => {
//   if (!data.total) {
//       message.warn('导出数据为空');
//   } else if (data.total > 1000) {
//       message.warn('数据量大于1000条，请筛选后再导出');
//   } else {
//       const params = {
//           id: data.id,
//           companyName: data.companyName,
//           agentName: data.agentName,
//           auditStatus: data.auditStatus || '',
//           createTimeStart: data.applyTime ? data.applyTime[0].format('YYYY-MM-DD') : '',
//           createTimeEnd: data.applyTime ? data.applyTime[1].format('YYYY-MM-DD') : '',
//           total: data.total
//       };
//       const headers = {
//         "OSS-Token": getToken("ossToken")
//       }
//       Download.downloadLargeFile('/ukeyorder/common/ukey/order/export', params,"POST",);
//   }
// };

  return (
    <div>
        <div className="content-title">
          <Divider type="vertical" />
          角色管理
        </div>
        <div className="from-box">
        <Button type="primary" className="ml8" onClick={() => showModal(null)}>
          新增角色
        </Button>
        </div>
        <EnhancedTable
             loading={load}
             dataSource={tableData}
             bordered={true}
             columns={columns}
             searchParams={searchParams}
             onSearch={onTableSearch}
             hasExport={false}
            />
             <Modal
                    title={modelData ? '角色信息修改' : '新建角色'}
                    open={roleVisible}
                    key={modelData ? modelData.id : keyNum}
                    onCancel={hideModal}
                    footer=""
                >
                    <AddNewRole
                        modelData={modelData}
                        callbackParent={onChildAction}
                    ></AddNewRole>
                </Modal>
    </div>
  );
};

export default RoleManagement;
